製作完成與未完成樣式

用最簡單的刪除線來做我們的樣式，那第一步就是要給予一個class去做切換。

function ToDo({todo}){
    return(
       <div id={todo.id} className={todo.complete ? "todo strike":"todo"}>
           {todo.task}
        </div>
    )
}

有了class後可以在index.css上加上strike樣式。

.strike{
  text-decoration: line-through;
}

此時畫面中已經可以看到完成項目被加上了刪除線

切換功能

接著要加入一個可以在點擊時改變他完成狀態功能，需回到app.js去設定他的state。

handleToggle的功能為點擊todo其中一個內容，並將id傳入funciton中，在toDoList的清單中找到相同id的物件，將他的complete狀態做toggle。

const handleToggle = (id) => {
  let mapped = toDoList.map(task => {
    return task.id === Number(id) ? { ...task, complete: !task.complete } : { ...task};
  });
  setToDoList(mapped);
}

在app.js中的ToDoList元件加上handleToggle

<ToDoList tDoList={toDoList} handleToggle={handleToggle}/>

到ToDoList.js裡面把從外層的handleToggle引入

function ToDoList({toDoList,handleToggle}){
  return(
      <div>
         {toDoList.map(todo=>{
          return(
              <ToDo todo={todo} handleToggle={handleToggle}/>
          )
         })}
      </div>
  )
}

最內層的ToDo.js也要引入handleToggle並加上onClick的功能才可以真正被點擊

function ToDo({todo,handleToggle}){
  const handleClick=(e)=>{
      e.preventDefault()
      handleToggle(e.currentTarget.id)
  }
  return(
      <div id={todo.id} className={todo.complete?"todo strike":"todo"} onClick={handleClick}>
         {todo.task}
      </div>
  )
}

第一個切換功能就完成拉!!